<template>
  <div class="employee-dep-management">
    <xr-new-header
      :content.sync="searchInput"
      placeholder="请输入员工名称/手机号"
      show-search
      icon-class="wk wk-s-seas"
      icon-color="#26D4DA"
      label="员工与部门管理"
      @search="headerSearch"
    >
      <!-- 启用禁用搜索 -->
      <el-select
        class="stu-select"
        @change="refreshUserList"
        clearable
        slot="xr_l"
        v-model="userStatus"
      >
        <el-option
          v-for="(item, index) in stuList"
          :label="item.label"
          :key="index"
          :value="item.status"
        />
      </el-select>
      <!-- 启用禁用搜索 end -->
      <div slot="ft">
        <el-button
          type="primary"
          icon="el-icon-user-solid"
          @click="addEmployee"
          v-if="userSaveAuth"
          >新增员工</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-document-add"
          @click="appendStruc(currentMenuData)"
          v-if="strucSaveAuth && currentMenuData && currentMenuData.id"
          >创建子部门</el-button
        >
        <el-button
          type="primary"
          @click="editStruc(currentMenuData)"
          v-if="strucUpdateAuth && currentMenuData && currentMenuData.id"
          >编辑</el-button
        >
        <el-button
          type="danger"
          @click="deleteStruc(currentMenuData)"
          v-if="strucDeleteAuth && currentMenuData && currentMenuData.id"
          >删除</el-button
        >
      </div>
    </xr-new-header>
    <div class="system-content">
      <!-- 左边导航栏 -->
      <div v-loading="depLoading" class="system-nav">
        <div class="system-nav__content">
          <div class="section">
            <div class="section__title">
              <img src="@/assets/img/admin/department.png" alt="" />
              <span>部门</span>
              <el-button
                v-if="strucSaveAuth"
                type="text"
                icon="el-icon-circle-plus"
                class="add-btn"
                @click="addStruc"
                >创建部门</el-button
              >
            </div>
            <div class="section__content">
              <div style="background: #f5f6fb; height: 100%">
                <el-tree
                  ref="tree"
                  :data="allDepData"
                  node-key="deptId"
                  highlight-current
                  @node-click="changeDepClick"
                  :default-expanded-keys="defaultexpandedkeys"
                >
                  <flexbox
                    slot-scope="{ node }"
                    :class="{ 'is-current': node.isCurrent }"
                    class="node-data"
                  >
                    <i
                      v-if="node.childNodes && node.childNodes.length"
                      :class="{
                        'el-icon-caret-bottom ': node.expanded,
                        'el-icon-caret-right': !node.expanded,
                      }"
                    ></i>
                    <el-tooltip
                      class="item"
                      :content="node.label"
                      placement="top"
                      effect="dark"
                      v-if="node.label.length > 13"
                    >
                      <div class="node-data__label text-one-line">
                        {{ node.label }}
                      </div>
                    </el-tooltip>
                    <div class="node-data__label text-one-line" v-else>
                      {{ node.label }}
                    </div>
                  </flexbox>
                </el-tree>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="system-view-table flex-index">
        <flexbox
          v-if="selectionList.length <= 1"
          justify="space-between"
          class="table-top"
        >
          <div class="table-top__title">
            {{ currentMenuData ? currentMenuData.label : "" }}
            <span> {{ total || 0 }} 人</span>

          </div>
        </flexbox>
        <flexbox v-if="selectionList.length > 1" class="selection-bar">
          <div class="selected—title">
            已选中
            <span class="selected—count">{{ selectionList.length }}</span> 项
          </div>
          <flexbox class="selection-items-box">
            <el-button
              v-for="(item, index) in selectionInfo"
              :icon="item.icon | wkIconPre"
              :key="index"
              type="primary"
              @click.native="selectionBarClick(item.type)"
              >{{ item.name }}</el-button
            >
          </flexbox>
        </flexbox>
        <div class="flex-box">
          <el-table
            v-loading="loading"
            id="depTable"
            :data="tableData"
            :height="tableHeight"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
            class="emp_table"
          >
            <el-table-column v-if="tableUpdateAuth" type="selection" />
            <el-table-column
              v-for="(item, index) in fieldList"
              :key="index"
              :prop="item.field"
              :label="item.value"
              :formatter="tableFormatter"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="roleName" label="角色">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="changeMark(scope.row.roleName)"
                  placement="top-start"
                  popper-class="popper_sty"
                  v-if="scope.row.roleName && scope.row.roleName.length > 20"
                >
                  <span
                    @click="editsRole(scope.row)"
                    class="ellipsis color_blue"
                    :class="
                      scope.row.isSuper == 1 ? 'cursor_not_allowed' : 'pointer'
                    "
                    >{{ scope.row.roleName }}</span
                  >
                </el-tooltip>
                <span
                  @click="editsRole(scope.row)"
                  class="color_blue"
                  :class="
                    scope.row.isSuper == 1 ? 'cursor_not_allowed' : 'pointer'
                  "
                  v-else
                  >{{ scope.row.roleName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="roleName" label="管理部门">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="changeMark(scope.row.manageDeptName)"
                  placement="top-start"
                  popper-class="popper_sty"
                  v-if="
                    scope.row.manageDeptName &&
                    scope.row.manageDeptName.length > 20
                  "
                >
                  <span
                    @click="editsDep(scope.row)"
                    class="ellipsis color_blue"
                    :class="
                      scope.row.isSuper == 1 ? 'cursor_not_allowed' : 'pointer'
                    "
                    >{{ scope.row.manageDeptName || "无" }}</span
                  >
                </el-tooltip>
                <span
                  @click="editsDep(scope.row)"
                  class="color_blue"
                  :class="
                    scope.row.isSuper == 1 ? 'cursor_not_allowed' : 'pointer'
                  "
                  v-else
                  >{{ scope.row.manageDeptName || "无" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="账号状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  :disabled="scope.row.isSuper == 1"
                  @change="handleStatusChange(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="resetsPassword(scope.row)"
                  v-if="scope.row.isSuper != 1"
                  >重置密码</el-button
                >
                <el-button
                  type="text"
                  @click="editBtn(scope.row)"
                  v-if="scope.row.isSuper != 1"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="创建时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>
          </el-table>
          <div class="p-contianer">
            <!-- <div class="status-des">
              <div
                v-for="item in statusOptions"
                :key="item.value"
                class="status-des-item"
              >
                <div
                  :style="{ 'background-color': getStatusColor(item.value) }"
                />
                {{ item.label }}
              </div>
            </div> -->
            <el-pagination
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size.sync="pageSize"
              :total="total"
              class="p-bar"
              background
              layout="prev, pager, next, sizes, total, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 新增部门 -->
    <addDepDialog
      :depCreateDialog="depCreateDialog"
      :superDepList="allDepData"
      :depCreateTitle="depCreateTitle"
      v-model="depForm"
      @submitDialog="submitDialog"
    ></addDepDialog>
    <!-- 详情 -->
    <employee-detail
      v-if="employeeDetailDialog"
      :data="dialogData"
      @edit="editBtn"
      @command="handleCommand"
      @hide-view="employeeDetailDialog = false"
    />
    <!-- 重置密码 -->
    <resetPassword
      :resetPasswordVisible="resetPasswordVisible"
      v-model="passForm"
      @passSubmit="passSubmit"
    >
    </resetPassword>
    <!-- 新增员工 -->
    <addEmployee
      v-if="employeeCreateDialog"
      :loading="loading"
      :dialogTitle="dialogTitle"
      :optionsList="optionsList"
      v-model="formInline"
      :deptName="dialogData.deptName"
      :manageDeptId="dialogData.manageDeptId"
      :manageDeptName="dialogData.manageDeptName"
      @newDialogSubmit="newDialogSubmit"
      @newHandleClose="newHandleClose"
    ></addEmployee>
    <!-- 批量导入 -->
    <bulk-import-user
      :show="bulkImportShow"
      @close="bulkImportShow = false"
      @success="refreshUserList"
    />
    <!-- 角色编辑 -->
    <edit-role-dialog
      v-if="editRoleDialogShow"
      :selection-list="selectionList"
      :visible.sync="editRoleDialogShow"
      @change="getUserList"
    />
    <!-- 管理部门编辑 -->
    <!-- <edit-manage-dep
      v-if="editManageDialogShow"
      :visible.sync="editManageDialogShow"
      :manageDeptId="selectionList[0].manageDeptId || ''"
      :manageDeptName="selectionList[0].manageDeptName || ''"
      @sureClick="sureClick"
    /> -->
    <manageDep
      v-if="editManageDialogShow"
      @submitDeps="sureClick"
      :manageDeptId="selectionList[0].manageDeptId || ''"
      :manageDeptName="selectionList[0].manageDeptName || ''"
      :showIpt="false"
      :visible="editManageDialogShow"
    ></manageDep>
  </div>
</template>

<script>
import {
  depDeleteAPI,
  depEditAPI,
  depSaveAPI,
  userAddAPI,
  userEditAPI,
  roleListAPI,
  adminUsersUpdatePwdAPI,
  adminUsersUsernameEditAPI,
  adminUsersManagerUsernameEditAPI,
  usersEditStatusAPI,
  getUserAndSeatsInfo,
} from "@/api/admin/employeeDep";
import { queryBaseUserList, depListAPI, userListAPI } from "@/api/common"; // 直属上级接口
import { sendSmsAPI } from "@/api/login";
import { mapGetters } from "vuex";
import BulkImportUser from "./components/BulkImportUser";
import addDepDialog from "./components/addDepDialog";
import resetPassword from "./components/resetPassword";
import addEmployee from "./components/addEmployee";
import EmployeeDetail from "./components/EmployeeDetail";
import XrNewHeader from "@/components/XrNewHeader";
import SlideVerify from "@/components/SlideVerify";
import EditRoleDialog from "./components/EditRoleDialog";
import editManageDep from "./components/editManageDep";
import { chinaMobileRegex, objDeepCopy } from "@/utils";
import XrCreate from "@/components/XrCreate";
import manageDep from "../components/manageDep";
export default {
  /** 系统管理 的 员工部门管理 */
  name: "EmployeeDep",
  components: {
    EmployeeDetail,
    BulkImportUser,
    XrNewHeader,
    SlideVerify,
    EditRoleDialog,
    editManageDep, //编辑管理部门
    XrCreate,
    addDepDialog, //新增部门
    resetPassword, //重置密码
    addEmployee, //新建员工
    manageDep,
  },
  data() {
    return {
      // 右边导航
      depCreateTitle: "新建",
      depCreateDialog: false, // 控制部门新增 编辑 数据
      allDepData: [], // 包含全部部门信息
      depLoading: false, // 左侧部门loading效果
      // 列表
      loading: false, // 表的加载动画
      searchInput: "", // 搜索
      statusOptions: [
        { value: "0", label: "禁用" },
        { value: "1", label: "激活" },
        { value: "2", label: "未激活" },
      ],
      // selectModel: '', // 状态值 用于筛选
      /** 列表 */
      fieldList: [
        { field: "realname", value: "姓名", width: "150" },
        { field: "username", value: "手机号", width: "150" },
        { field: "deptName", value: "所属部门", type: "select", width: "100" },
        { field: "sex", value: "性别", type: "select", width: "50" },
        {
          field: "parentName",
          value: "直属上级",
          type: "select",
          width: "150",
        },
      ],
      selectionList: [], // 批量勾选数据
      tableData: [],
      tableHeight: document.documentElement.clientHeight - 300, // 表的高度
      currentMenuData: {
        label: "所有员工",
        type: "all",
      },
      /** 分页逻辑 */
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 45, 60],
      total: 0,
      /** ** */
      employeeDetailDialog: false,
      dialogData: {},
      // 新建和编辑
      employeeCreateDialog: false,
      dialogTitle: "新建员工",
      formInline: {},
      //新增部门
      depForm: {
        depCreateLabelValue: "",
        depSelect: undefined,
      },
      // 编辑部门时id
      treeEditId: "",
      optionsList: {
        parentId: {
          //直属上级
          field: "parentId",
          list: [{ id: 0, name: "请选择" }],
        },
        sex: {
          //性别
          field: "sex",
          list: [
            { id: 1, name: "男" },
            { id: 2, name: "女" },
          ],
        },
      },
      groupsList: [],
      // 重置密码
      resetPasswordVisible: false,
      passForm: {},
      // 重置登录账号
      resetUserNameVisible: false,
      resetUserNameForm: {
        username: "",
        password: "",
      },
      isManageReset: false, // 是管理员重置密码
      slideVerifyShow: false,
      slideVerifyPass: false,
      codeTime: 60,
      codeSecond: 60,
      codeTimer: null,
      // 批量导入
      bulkImportShow: false,
      editRoleDialogShow: false,
      editManageDialogShow: false,
      countInfo: {
        openCount: 0,
        seatsCount: 0,
        allCount: 0,
      },
      defaultexpandedkeys: [],
      stuList: [
        {
          status: "",
          label: "全部",
        },
        {
          status: 1,
          label: "启用",
        },
        {
          status: 0,
          label: "停用",
        },
      ],
      userStatus: "",
    };
  },
  computed: {
    ...mapGetters(["manage"]),
    // 员工创建权限
    userSaveAuth() {
      return this.manage && this.manage.users && this.manage.users.userSave;
    },
    // 员工编辑操作权限
    userUpdateAuth() {
      return this.manage && this.manage.users && this.manage.users.userUpdate;
    },
    // 员工禁用启用权限
    userEnablesAuth() {
      return this.manage && this.manage.users && this.manage.users.userEnables;
    },
    // 员工列表的勾选编辑
    tableUpdateAuth() {
      return this.userEnablesAuth && this.userUpdateAuth;
    },
    // 部门新建权限
    strucSaveAuth() {
      return this.manage && this.manage.users && this.manage.users.deptSave;
    },
    // 部门编辑权限
    strucUpdateAuth() {
      return this.manage && this.manage.users && this.manage.users.deptUpdate;
    },
    // 部门删除权限
    strucDeleteAuth() {
      return (
        this.currentMenuData &&
        this.currentMenuData.pid !== 0 &&
        this.manage &&
        this.manage.users &&
        this.manage.users.deptDelete
      );
    },
    // 员工编辑角色权限
    userUpdateRoleAuth() {
      return this.manage && this.manage.permission;
    },
    // 批量操作
    selectionInfo: function () {
      let temps = [];
      if (this.selectionList.length > 1) {
        if (this.userEnablesAuth) {
          temps = [
            {
              name: "禁用",
              type: "lock",
              icon: "wk wk-remove",
            },
            {
              name: "激活",
              type: "unlock",
              icon: "wk wk-activation",
            },
          ];
        }
        if (this.userUpdateAuth) {
          temps = temps.concat([
            {
              name: "重置密码",
              type: "reset",
              icon: "wk wk-circle-password",
            },
          ]);
        }

        if (this.userUpdateRoleAuth) {
          temps.push({
            name: "编辑角色",
            type: "editRole",
            icon: "wk wk-edit",
          });
        }
      }
      return temps;
    },
  },
  mounted() {
    var self = this;
    /** 控制table的高度 */
    window.onresize = function () {
      self.tableHeight = document.documentElement.clientHeight - 300;
    };
    // 部门-树形列表
    this.getDepTreeList();
    // 员工列表
    this.getUserList();
    // 坐席数
    this.getUserAndSeatsInfo();
  },
  methods: {
    submitDeps() {},
    /**
     * 修改管理部门-提交
     */
    sureClick(e) {
      userEditAPI({
        userId: this.selectionList[0].userId,
        manageDeptId: e,
        parentId: this.selectionList[0].parentId,
        realname: this.selectionList[0].realname,
        roleId: this.selectionList[0].roleId,
        sex: this.selectionList[0].sex,
        username: this.selectionList[0].username,
      })
        .then((res) => {
          if (this.editManageDialogShow) {
            this.editManageDialogShow = false;
          }
          this.$message.success("编辑成功");
          this.getUserList();
          this.getSelectUserList();
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 获取坐席数
     */
    getUserAndSeatsInfo() {
      getUserAndSeatsInfo().then((res) => {
        this.countInfo = res.data;
      });
    },
    /**
     * 修改角色
     */
    editsRole(row) {
      if (row.isSuper != 1) {
        this.selectionList = [row];
        this.editRoleDialogShow = true;
      }
    },
    /**
     * 修改管理部门
     */
    editsDep(row) {
      if (row.isSuper != 1) {
        this.selectionList = [row];
        this.editManageDialogShow = Date.now();
      }
    },
    // 关闭部门弹框
    depCreateClose() {
      this.depCreateDialog = false;
      this.resetDep();
    },
    resetDep() {
      this.depForm = {
        depCreateLabelValue: "",
        depSelect: undefined,
      };
    },
    /**
     * 修改密码
     */
    resetsPassword(row) {
      this.dialogData = row;
      this.resetPasswordVisible = Date.now();
    },
    /**
     * 修改状态
     */
    handleStatusChange(row) {
      let text = row.status == "1" ? "启用" : "停用";
      this.$confirm(
        '确认要"' + text + '""' + row.realname + '"用户的账号吗？',
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          usersEditStatusAPI({
            ids: [row.userId],
            status: row.status == "0" || row.status == "2" ? 0 : 1,
          })
            .then((res) => {
              // this.loading = false;
              this.$message.success("修改成功");
              this.getUserList();
              this.getUserAndSeatsInfo();
            })
            .catch(() => {
              row.status = row.status == "0" || row.status == "2" ? 1 : 0;
              // this.loading = false;
            });
        })
        .catch(function () {
          row.status = row.status == "0" || row.status == "2" ? 1 : 0;
        });
    },
    /**
     * 选择部门
     */
    changeDepClick(data) {
      this.currentMenuData = data;
      this.refreshUserList();
    },
    /**
     * 刷新员工列表
     */
    refreshUserList() {
      this.currentPage = 1;
      this.getUserList();
    },

    /**
     * 用户列表
     */
    getUserList() {
      this.loading = true;
      const params = {
        page: this.currentPage,
        limit: this.pageSize,
        realname: this.searchInput,
        status: this.userStatus,
      };

      if (this.currentMenuData) {
        // 员工有type值
        if (this.currentMenuData.type) {
          if (this.currentMenuData.type == "active") {
            params.status = 1;
          } else {
            params.label = 0;
          }
        } else if (this.currentMenuData.id) {
          params.deptId = this.currentMenuData.id;
        }
      }
      userListAPI(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.totalRow;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 头部搜索
     */
    headerSearch(search) {
      this.searchInput = search;
      this.refreshUserList();
    },
    handleClose() {
      this.employeeDetailDialog = false;
    },
    // 表格第一列点击事件
    rowClick(row, column, event) {
      if (!this.employeeCreateDialog) {
        this.dialogData = row;
      }
    },
    // 关闭-新建员工弹框
    newHandleClose() {
      this.employeeCreateDialog = false;
    },
    // 新建用户
    addEmployee() {
      this.dialogData = {};
      this.dialogTitle = "新建员工";
      this.formInline = {
        roleId: [],
        deptId:
          this.currentMenuData && this.currentMenuData.id
            ? this.currentMenuData.id
            : undefined,
      };
      this.employeeCreateDialog = true;
    },
    // 详情 -- 编辑用户
    editBtn(row) {
      this.dialogData = row;
      this.dialogTitle = "编辑员工";
      this.getSelectUserList();
      var detail = {};
      detail = {
        roleId: this.dialogData.roleId
          ? this.dialogData.roleId.split(",").map((item) => {
              return Number(item);
            })
          : [],
        parentId: this.dialogData.parentId || "",
        deptId: this.dialogData.deptId || "",
        sex: this.dialogData.sex || "",
        username: this.dialogData.username || "",
        userId: this.dialogData.userId,
        realname: this.dialogData.realname,
        status: this.dialogData.status || "",
      };
      this.formInline = detail;
      this.employeeCreateDialog = true;
    },
    /**
     * 获取角色列表
     */
    getRoleList() {
      // 角色列表
      roleListAPI().then((res) => {
        this.groupsList = res.data;
      });
    },
    /**
     * 创建部门
     */
    addStruc() {
      // const id =
      //   this.allDepData && this.allDepData.length
      //     ? this.allDepData[0].deptId
      //     : "";
      // if (id) {
      this.depForm.depCreateLabelValue = "";
      this.depCreateTitle = "创建部门";
      this.treeEditId = "";
      // this.depSelect = id;
      this.depCreateDialog = Date.now();
      // }
    },
    /**
     * 创建子部门
     */
    appendStruc(data) {
      this.depForm.depCreateLabelValue = "";
      this.depCreateTitle = "创建部门";
      this.treeEditId = "";
      this.depForm.depSelect = data.deptId;
      this.depCreateDialog = Date.now();
    },
    /**
     * 编辑部门
     */
    editStruc(data) {
      this.depForm.depCreateLabelValue = data.label;
      this.treeEditId = data.id;
      this.depForm.depSelect = data.pid;
      this.depCreateTitle = "编辑部门";
      this.depCreateDialog = Date.now();
    },
    /**
     * 删除部门
     */
    deleteStruc(data) {
      this.$confirm(`此操作将删除${data.name}部门，是否确定删除？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        depDeleteAPI({ id: data.id })
          .then((res) => {
            this.getDepTreeList();
            this.$store.dispatch("initDepList");
            this.$message.success("删除成功");
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    // 新增部门-确定按钮
    submitDialog() {
      if (!this.treeEditId) {
        depSaveAPI({
          name: this.depForm.depCreateLabelValue,
          pid: this.depForm.depSelect,
        }).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$message.success(res.msg);
            this.$store.dispatch("initDepList");
          }
          this.currentMenuData = {
            label: "所有员工",
            type: "all",
          };
          this.getDepTreeList();
          this.depCreateClose();
        });
      } else {
        depEditAPI({
          name: this.depForm.depCreateLabelValue,
          deptId: this.treeEditId,
          pid: this.depForm.depSelect,
        }).then((res) => {
          if (res.code == 0) {
            this.$store.dispatch("initDepList");
            this.$message.success(res.msg);
          }
          this.currentMenuData = {
            label: "所有员工",
            type: "all",
          };
          this.getDepTreeList();
          this.depCreateClose();
        });
      }
    },
    // 获取树形列表
    getDepTreeList() {
      this.depLoading = true;
      depListAPI({ type: "tree" })
        .then((response) => {
          this.allDepData = response.data || [];
          this.defaultexpandedkeys = [response.data[0].deptId];
          this.depLoading = false;
        })
        .catch(() => {
          this.depLoading = false;
        });
    },

    // 用户新建
    newDialogSubmit() {
      if (this.dialogTitle == "新建员工") {
        this.loading = true;
        const formInline = objDeepCopy(this.formInline);
        formInline.roleId = formInline.roleId.join(",");
        userAddAPI(formInline)
          .then((res) => {
            this.$store.dispatch("initUserList");
            this.$message.success("新增成功");
            this.employeeCreateDialog = false;
            this.refreshUserList();
            this.getSelectUserList();
            this.getUserAndSeatsInfo();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.loading = true;
        const formInline = objDeepCopy(this.formInline);
        formInline.roleId = formInline.roleId.join(",");
        userEditAPI(formInline)
          .then((res) => {
            this.$store.dispatch("initUserList");
            if (this.employeeDetailDialog) {
              this.employeeDetailDialog = false;
            }
            this.employeeCreateDialog = false;
            this.$message.success("编辑成功");
            this.getUserList();
            this.getSelectUserList();
            this.getUserAndSeatsInfo();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    // 详情里面点击事件
    handleCommand(command) {
      switch (command) {
        case "reset":
          // 当前登录用户ID
          this.passForm = {
            password: "",
          };
          this.resetPasswordVisible = Date.now();
          break;
        case "status":
          usersEditStatusAPI({
            ids: [this.dialogData.userId],
            status: this.dialogData.status === 0 ? 1 : 0,
          }).then((res) => {
            this.employeeDetailDialog = false;
            this.$message.success("修改成功");
            this.getUserList();
          });
          break;
      }
    },
    /** 操作 */
    selectionBarClick(type) {
      var ids = this.selectionList
        .map(function (item, index, array) {
          return item.userId;
        })
        .join(",");
      if (type === "lock" || type === "unlock") {
        //禁用 || 激活
        var message = type === "lock" ? "禁用" : "激活";
        this.$confirm("员工账号将被" + message + ", 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.loading = true;
          usersEditStatusAPI({
            ids: ids.split(","),
            status: type === "unlock" ? 1 : 0,
          })
            .then((res) => {
              this.loading = false;
              this.$message.success("修改成功");
              this.getUserList();
              this.getUserAndSeatsInfo();
            })
            .catch(() => {
              this.loading = false;
            });
        });
      } else if (type === "reset") {
        //重置密码
        this.resetPasswordVisible = Date.now();
      } else if (type === "editRole") {
        //编辑角色
        this.editRoleDialogShow = true;
      }
    },

    // 重置密码 -- 确定按钮
    passSubmit(val) {
      var ids = [];
      if (this.selectionList.length > 0) {
        ids = this.selectionList.map(function (item, index, array) {
          return item.userId;
        });
      } else {
        ids.push(this.dialogData.userId);
      }
      val.ids = ids;
      this.loading = true;
      adminUsersUpdatePwdAPI(val)
        .then((res) => {
          this.$message.success("重置成功");
          this.resetPasswordVisible = false;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.refreshUserList();
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },
    // 勾选
    handleSelectionChange(val) {
      this.selectionList = val; // 勾选的行
    },

    /** 获取选择直属上级列表 */
    getSelectUserList() {
      //  this.optionsList["parentId"].list = [
      //       {
      //         id: "",
      //         name: "请选择",
      //       },
      //     ];
      this.loading = true;
      queryBaseUserList({ pageType: 0 })
        .then((res) => {
          this.optionsList["parentId"].list = [
            {
              id: "",
              name: "请选择",
            },
          ];
          for (const i of res.data.list) {
            this.optionsList["parentId"].list.push({
              id: i.userId,
              name: i.realname,
            });
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 获取状态颜色 0 禁用 1 启用 2未激活
    getStatusColor(status) {
      if (status == 0) {
        return "#FF6767";
      } else if (status == 1) {
        return "#46CDCF";
      } else if (status == 2) {
        return "#CCCCCC";
      }
    },
    // 列表信息格式化
    tableFormatter(row, column) {
      if (column.property == "sex") {
        return { 1: "男", 2: "女" }[row.sex];
      }
      return row[column.property];
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/login/index.scss";
.verify-picture {
  margin-top: 20px;
}

.sms-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  .el-input {
    width: 210px;
  }
  .el-button {
    flex: 1;
    font-size: 12px;
    color: white;
    background-color: #3e6bea;
    border-radius: $xr-border-radius-base;
    border: 0 none;
    padding: 0;
    margin-left: 20px;

    .btn-content {
      width: 100%;
      height: 42px;
      @include center;
      .icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
    &:hover,
    &.is-disabled,
    &.is-disabled:hover {
      color: white;
      border-color: #517aec;
      background-color: #517aec;
    }
  }
}

.employee-dep-management {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.system-content {
  position: relative;
  height: 100%;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.system-nav {
  width: 280px;
  height: 100%;
  overflow: auto;
  margin-right: 10px;
  background: #fff;
  // border: 1px solid $xr-border-line-color;
  border-radius: $xr-border-radius-base;
}
.system-nav__content {
  height: 100%;
  overflow: auto;
}
.section__content {
  padding: 16px;
  padding-top: 0;
}

.system-nav
  /deep/
  .el-tree[data-v-613d09da]
  .el-tree-node__content
  .node-data.is-current {
  background: #edf1fc !important;
}
.system-nav
  /deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #edf2ff !important;
}
.system-nav /deep/ .el-tree-node__content:hover {
  background-color: #edf2ff !important;
}
.system-nav /deep/ .el-tree .el-tree-node__content .node-data:hover {
  background: none !important;
}
.section__content /deep/ .el-tree {
  background: transparent;
}
.system-nav /deep/ .is-current > .node-data__label {
  color: #0066f9 !important;
}
// 菜单
.section {
  height: 100%;
  &__title {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 0 15px;
    display: flex;
    height: 55px;
    align-items: center;
    .add-btn {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    img {
      width: 20px;
      height: 20px;
      margin-right: 11px;
    }
  }
  &__content {
    height: calc(100% - 55px);
    overflow: auto;
    overflow-y: overlay;
    overflow-x: overlay;
  }
}

.menu-item {
  position: relative;
  cursor: pointer;
  padding: 12px 15px;
  color: #333;

  &__icon {
    font-size: 14px;
    margin-right: 8px;
    color: #8a94a6;
  }

  &__content {
    font-size: 14px;
  }
}

.menu-item:hover,
.menu-item.is-select {
  background-color: $xr--background-color-base;
}

.menu-item:hover::before,
.menu-item.is-select::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background-color: #5383ed;
}

.system-view-table {
  background: #fff;
  border-left: 1px solid $xr-border-line-color;
  position: absolute;
  top: 0;
  left: 279px;
  bottom: 0;
  right: 0;
}

.table-top {
  &__title {
    font-size: 14px;
    color: #333333;
    height: 55px;
    line-height: 55px;
  }

  .el-dropdown {
    margin-left: 7px;
  }
}

.all-user-reminder {
  width: auto;
  margin-left: 5px;
  display: inline-block;
}

.el-table /deep/ .el-table-column--selection .cell {
  padding-left: 14px;
}

// .status {
//   display: inline-block;
//   margin-left: 50px;
// }
// .status > span {
//   margin-right: 10px;
// }

.status-name {
  div {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }
  color: $xr-color-primary;
  cursor: pointer;
}
/* 详情 */
.employee-dep-management /deep/ .el-dialog__wrapper {
  margin-top: 60px !important;
}

.el-form {
  padding: 0;
}

.nav-dialog-div {
  margin-bottom: 20px;
}
.nav-dialog-div {
  .el-input,
  .el-select {
    width: calc(100% - 80px);
  }
}
/** 树形结构 */
.el-tree /deep/ .el-tree-node__expand-icon {
  display: none;
}
.el-tree /deep/ .el-tree-node__content {
  height: 40px;

  .node-data {
    // .node-img {
    //   width: 15px;
    //   height: 15px;
    //   display: block;
    //   margin-right: 8px;
    //   margin-left: 24px;
    // }
    height: 40px;
    padding: 0 15px;
    position: relative;
    border-radius: $xr-border-radius-base;

    .wk {
      font-size: 14px;
      color: #8a94a6;
      flex-shrink: 0;
    }

    .wk-department {
      margin-right: 8px;
    }

    &__mark {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #e6e6e6;
      margin-right: 8px;
      flex-shrink: 0;
    }

    &__label {
      flex: 1;
      color: #333;
      font-size: 14px;
      margin-right: 8px;
    }

    .wk-up-unfold {
      margin-left: 8px;
      transition: transform 0.3s;
    }

    .wk-up-unfold.is-close {
      transform: rotateZ(180deg);
    }
    // .node-label-set {
    //   display: none;
    // }
  }

  .node-data.is-current,
  .node-data:hover {
    background-color: $xr--background-color-base;
  }

  // .node-data:hover .node-label-set {
  //   display: block;
  // }
}
// .el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
//   background-color: #ebf3ff;
//   border-right: 2px solid #46cdcf;
//   .node-label-set {
//     display: block;
//   }
// }
.system-nav /deep/ .el-tree-node > .el-tree-node__children {
  overflow: visible;
}
.system-nav /deep/ .el-tree > .el-tree-node {
  width: 100% !important;
  display: inline-block !important;
}

.system-nav
  /deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: white;
}

.system-nav /deep/ .el-tree-node__content:hover {
  background-color: white;
}

/* 搜索框图标按钮 */
.icon-search .el-icon-search {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  color: #ccc;
}
/* 设置flex布局 */
.flex-index {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
/* 设置占位 */
.flex-box {
  flex: 1;
  // border-bottom: 1px solid $xr-border-line-color;
}
/* 搜索框 */
.icon-search {
  width: 280px;
  position: relative;
}
.new-dialog-form /deep/ .el-select {
  display: block;
}

/** 分页布局 */
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
    font-size: 14px !important;
  }
}

/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 50px;
  padding: 0 20px;
  color: #777;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    color: #333;
    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 15px;
  .el-button {
    color: #666;
    background-color: $xr--background-color-base;
    border-color: $xr--background-color-base;
    font-size: 12px;
    height: 28px;
    border-radius: 14px;
    /deep/ i {
      font-size: 12px;
      margin-right: 5px;
    }
  }

  .el-button--primary:hover {
    background: $xr-color-primary;
    border-color: $xr-color-primary;
    color: #ffffff;
  }

  .el-button + .el-button {
    margin-left: 15px;
  }
}
.new-dialog-form
  /deep/
  .el-form-item
  .el-form-item__content
  .el-select-group__wrap:not(:last-of-type)::after {
  display: none;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__content .el-select-group {
  padding-left: 10px;
}
.new-dialog-form
  /deep/
  .el-form-item
  .el-form-item__content
  .el-select-group__title {
  border-bottom: 1px solid #e4e7ed;
  padding: 0 0 7px;
  margin: 0 20px 5px;
}

.status-des {
  font-size: 12px;
  color: #777777;
  margin: 0 5px;
  position: absolute;
  left: 0;
  top: 7px;
  .status-des-item {
    margin: 8px;
    display: inline-block;
    div {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin-right: 5px;
    }
  }
}

// 提示
// 提示标志
.wukong-help_tips {
  color: #999;
  font-size: 14px;
  margin-left: 3px;
  cursor: pointer;
}

.wukong-help_tips:hover {
  color: $xr-color-primary;
}

// 修改密码和修改登录名的样式
.el-password {
  .el-form-item {
    margin-bottom: 5px;
  }
}

.el-dialog__wrapper /deep/.el-dialog__body {
  padding: 20px;
}

.tips {
  font-size: 13px;
  color: #999;
}
.color_blue {
  color: #0066f9;
}
.emp_table /deep/ th {
  background: #f5f6fb !important;
  border: none !important;
}
/deep/.emp_table.el-table {
  border: none !important;
}
.emp_table /deep/ tr > th:first-child {
  padding-left: 6px;
}
.emp_table /deep/ tr > td:first-child {
  padding-left: 6px;
}
.stu-select {
  margin-right: 16px;
  width: 100px;
}
.cursor_not_allowed {
  cursor: not-allowed;
  color: #7ba1fd !important;
}
@import "../styles/table.scss";
</style>

